<template>
	<view class="open-account">
		<u--form ref="uForm" :model="form" :rules="rules" labelPosition="left" labelWidth="136rpx">
			<view class="form-box">
				<u-form-item label="真实姓名" prop="name">
					<u--input v-model="form.name" placeholder="请输入真实姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u--input v-model="form.phone" type="tel" placeholder="请输入手机号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="身份证号" prop="idcard">
					<u--input v-model="form.idcard" type="idcard" placeholder="请输入身份证号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="有效期类型" labelWidth="180rpx">
					<u-radio-group v-model="form.type" activeColor="#5749f7" placement="row">
						<u-radio label="非长期有效" name="1" :customStyle="{marginRight: '24rpx'}"></u-radio>
						<u-radio label="长期有效" name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
				<picker v-if="form.type == '1'" mode="date" @change="timeChange">
					<u-form-item label="证件日期" prop="time">
						<u--input v-model="form.time" placeholder="有效期到期日" border="none" disabled disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
				<u-form-item labelWidth="auto">
					<view class="idcard-box">
						<view class="label-box">
							<text class="label">身份证照片</text>
							<text class="tips">（请确保身份证边框完整，字体清晰，无反光）</text>
						</view>
						<view class="image-box">
							<u-upload
								:fileList="idcardFront"
								name="idcardFront"
								:maxCount="1"
								width="300"
								height="260"
								@afterRead="afterRead"
								@delete="deletePic"
							>
								<view class="box">
									<image class="image" src="@/static/idcrad-1.png" mode="aspectFill"></image>
									<view class="text">上传人像面</view>
								</view>
							</u-upload>
							<u-upload
								:fileList="idcardBack"
								name="idcardBack"
								:maxCount="1"
								width="300"
								height="260"
								@afterRead="afterRead"
								@delete="deletePic"
							>
								<view class="box">
									<image class="image" src="@/static/idcrad-2.png" mode="aspectFill"></image>
									<view class="text">上传国徽面</view>
								</view>
							</u-upload>
						</view>
					</view>
				</u-form-item>
				<picker :value="workIndex" :range="workArray" @change="workChange">
					<u-form-item label="职业列表" prop="work">
						<u--input v-model="form.work" placeholder="请选择" border="none" disabled disabledColor="#ffffff"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</picker>
				<u-form-item label="用户住址" prop="address">
					<u--input v-model="form.address" placeholder="请填用户住址" border="none"></u--input>
				</u-form-item>
			</view>
			
			<view class="password-box">
				<u-form-item label="设置密码" prop="password">
					<u--input v-model="form.password" placeholder="请设置支付密码" border="none" :password="hidePassword" disabled disabledColor="#ffffff" @click.native="goPassword"></u--input>
					<u-icon slot="right" :name="hidePassword ? 'eye-fill' : 'eye-off'" @click="hidePassword = !hidePassword"></u-icon>
				</u-form-item>
			</view>
			
			<view class="tips-box">支付密码：6位的数字，不可以是连续或者重复的数字</view>
		</u--form>
		
		<view class="button-box">
			<button class="btn">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				form: {
					name: '',
					phone: '',
					idcard: '',
					type: '1',
					time: '',
					idcardFront: '',
					idcardBack: '',
					work: '',
					address: '',
					password: '',
				},
				rules: {
					name: { required: true, message: '请输入真实姓名', trigger: 'blur' },
					phone: [
						{required: true, message: '请输入 11 位手机号', trigger: 'blur'},
						{ validator: (rule, value, callback) => { return uni.$u.test.mobile(value) },
							message: '手机号码不正确',
							trigger: 'blur',
						}
					],
					idcard: { required: true, message: '请输入身份证号', trigger: 'blur' },
					time: { required: true, message: '请选择有效期到期日', trigger: 'blur' },
				},
				idcardFront: [],
				idcardBack: [],
				workIndex: 0,
				workArray: [
					'公务员',
					'事业单位员工',
					'企业高管',
					'私营业主',
					'金融从业人员',
					'律师',
					'会计师',
					'医护人员',
					'学生',
					'公司员工',
					'商业服务',
					'工人',
					'农林牧副渔',
					'军人武警',
					'文体工作者',
					'家庭主妇',
					'退休',
					'自由职业者',
					'其他',
					'司机',
				],
				hidePassword: true,
			}
		},
		methods: {
			timeChange (e) {
				this.form.time = e.detail.value
			},
			// 删除图片
			deletePic(event) {
				this[event.name].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[event.name].length
				lists.map((item) => {
					this[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[event.name][fileListLen]
					this[event.name].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					})
				})
			},
			workChange (e) {
				const index = e.detail.value
				this.form.work = this.workArray[index]
			},
			goPassword () {
				uni.navigateTo({
					url: '/pages/my/settlement/password'
				})
			}
		}
	}
</script>

<style lang="scss">
.open-account {
	box-sizing: border-box;
	padding: 26rpx 0;
	min-height: 100%;
	background-color: #f5f5f5;
	.form-box {
		padding: 0 32rpx;
		background-color: #fff;
		.idcard-box {
			.label-box {
				.label {
					color: #303133;
					font-size: 15px;
				}
				.tips {
					color: #ff4c0d;
					font-size: 24rpx;
				}
			}
			.image-box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				.box {
					box-sizing: border-box;
					width: 300rpx;
					height: 260rpx;
					border: 1rpx solid #e5e5e5;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.image {
						width: 244rpx;
						height: 154rpx;
					}
					.text {
						margin-top: 30rpx;
						color: #333;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.password-box {
		margin-top: 26rpx;
		padding: 0 32rpx;
		background-color: #fff;
	}
	.tips-box {
		padding: 24rpx 40rpx;
		color: #ff4c0d;
		font-size: 26rpx;
	}
	.button-box {
		margin-top: 60rpx;
		padding: 0 40rpx;
		.btn {
			border-radius: 90rpx;
			color: #fff;
			line-height: 90rpx;
			background-color: #5749f7;
		}
	}
}
</style>
